<template>
    <div class="loves-result" :style="{width:pageWidth,height:pageHeight,transform:'translate3d(-50%,-50%,0) rotate('+rotate+')'}">
        <div class="left-result">
            <div class="name">蔡某某</div>
            <div class="f-name">蔡</div>
            <div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p>见于《世本》。战国时秦国有蔡泽，为相。《急就章》列为汉代常见姓氏之一。汉代有蔡千秋，沛人，字少君，授《春秋·毂梁传》，为谏议大夫。东汉有蔡伦，桂阳人，字敬仲，和帝时为中常侍。造蔡侯纸。蔡邕，陈留圉城人，字伯喈，博学多才，为蔡文姬之父。又有另一蔡邕，上虞人，与陈留蔡邕同时．《中国人名大辞典》收有蔡氏195例。宋《百家姓》列为第155姓。</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-result">
            <div class="name">蔡某某</div>
            <div class="f-name">蔡</div>
            <div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p>见于《世本》。战国时秦国有蔡泽，为相。《急就章》列为汉代常见姓氏之一。汉代有蔡千秋，沛人，字少君，授《春秋·毂梁传》，为谏议大夫。东汉有蔡伦，桂阳人，字敬仲，和帝时为中常侍。造蔡侯纸。蔡邕，陈留圉城人，字伯喈，博学多才，为蔡文姬之父。又有另一蔡邕，上虞人，与陈留蔡邕同时．《中国人名大辞典》收有蔡氏195例。宋《百家姓》列为第155姓。</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p>
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript:" class="download">下载</a>
        <div class="btm">
            <img :src="qrCode" alt="" class="qr1">
            <img :src="qrCode" alt="" class="qr2">
            <img :src="logo" alt="" class="logo">
            <img :src="mzlogo" alt="" class="mzlogo">
            <a href="" class="a1">扫一扫了解更多</a>
            <a href="" class="a2">扫一扫了解更多</a>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                pageWidth:'',
                pageHeight:'',
                rotate:'0deg',
                qrCode:require('./../../assets/img/qr.png'),
                logo:require('./../../assets/img/logo2.png'),
                mzlogo:require('./../../assets/img/mzlogo.png'),
            }
        },
        created() {
            this.init()
            setInterval(()=>{
                this.init()
            },2000)
        },
        methods:{
            init(){
                const fw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
                const fh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
                if(fw<fh){
                    this.pageWidth = fh+'px'
                    this.pageHeight = fw+'px'
                    this.rotate = '90deg'
                }else{
                    this.pageWidth = fw+'px'
                    this.pageHeight = fh+'px'
                    this.rotate = '0deg'
                }
            }
        }
    }
</script>
